<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/serch.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
</head>

<body>
    <header>
        <div class="logo"><a href="#" class="iconfont icon-wangyiyunyinle1">网易云音乐</a></div>
        <div class="download"><a href="#">下载APP</a></div>
    </header>
    <nav>
        <ul>
            <li><a href="index.html" class="active">推荐音乐</a></li>
            <li><a href="hot-music.html">热搜榜</a></li>
            <li><a href="search.html">搜索</a></li>
        </ul>
    </nav>
    <section>
        <div class="search">
            <div class="search-box">
                <span class="iconfont icon-sousuo"></span>
                <input type="text" placeholder="搜索歌曲、歌手、专辑">
            </div>
        </div>
        <div class="hot-search">
            <h3>热门搜索</h3>
            <ul>
                <li>他只是经过</li>
                <li>会不会</li>
                <li>永不失联的爱</li>
                <li>不曾遗忘的符号</li>
                <li>薛之谦</li>
                <li>日不落</li>
                <li>Dear john</li>
                <li>为你我受冷风吹</li>
                <li>魏大勋新歌</li>
                <li>起风了</li>
            </ul>
        </div>
        <div class="music"></div>
    </section>




</body>
<script>
    const inp = document.querySelector('input')
    const hotSearch = document.querySelector('.hot-search')
    const section = document.querySelector('section')
    async function search(key) {
        fetch(`http://iwenwiki.com:3000/search?keywords=${key}`)
            .then(res => {
                // 这里可以加入校验请求是否成功
                if (res.status == 200) {
                    hotSearch.remove()
                    return res.json()
                } else {
                    throw new Error('请求出错')
                }
            }).then(data => {
                //处理返回的结果 歌曲名 艺术家 专辑
                let songs = data.result.songs
                const music = document.createElement('div')
                music.className = "music"
                document.querySelector('.music').remove()
                section.append(music)
                console.log(songs);
                for (let song of songs) {
                    const musicItem = document.createElement('div')
                    musicItem.className = 'music-item'
                    musicItem.innerHTML = `
                    <a href="#" class="item">
                        <div class="music-name">
                            <p>${song.name}</p>
                            <p class="iconfont icon-erji">${song.artists[0].name} - ${song.album.name}</p>
                        </div>
                        <span class="iconfont icon-bofang"></span>
                    </a>
                    `
                    music.append(musicItem)
                }
            }).catch(err => {
                console.log('请求出错', err);
            })
    }
    inp.onchange = function () {
        search(inp.value) 
    }


</script>

</html>